<script setup>
import { ref } from 'vue'
let arr = [
  {
    id:1,
    title:'aaa',
    author:'bbbbbb',

    
  },
  {
    id:2,
    title:'aaa',
    author:'bbbbbb',

    
  },
  {
    id:3,
    title:'aaa',
    author:'bbbbbb',
    
  },
  {
    id:4,
    title:'aaa',
    author:'bbbbbb',
    
  }
]
let blogs = ref(arr)

function btuDel (){
  console.log("删除");
  
}
function btuGuo (){
  console.log("过滤");
  
}
function btuEdit (){
  console.log("修改");
  
}
function btuSave (){
  console.log("确认");
  
}function btuCancel (){
  console.log("取消");
  
}
</script>

<template>
  <div>
    <div id="OrEdit">
      <form>
        <table>
          <tbody>
            <tr>
              <td><label for="">标题</label></td>
              <td><input type="text"></td>
            </tr>
            <tr>
              <td><label for="">标题</label></td>
              <td><input type="text"></td>
            </tr>
            <tr>
              <td><label for="">标题</label></td>
              <td><input type="text"></td>
            </tr>
            <tr>
              <td><input type="button" value="保存" @click="btuSave"></td>
              <td><input type="button" value="取消" @click="btuCancel"></td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
    <div>
      <input type="text" placeholder="请输入您要查找的文字">
      <input type="button" value="过滤" @click="btuGuo">
      <input type="button" value="修改" @click="btuEdit">
    </div>
    <div id="list">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>作者</th>
            <th>内容</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="blog in blogs" :key="blog.id">
            <th>{{ blog.id }}</th>
            <th>{{blog.title}}</th>
            <th>{{ blog.author }}</th>
            <th>
              <input type="button" value="修改" @click="btuEdit(blog.id)">
              <input type="button" value="删除" @click="btuDel(blog.id)">
            </th>
          </tr>
          <tr>
            <th>1</th>
            <th>刘兴国</th>
            <th>sbbbbbbbb</th>
            <th>
              <input type="button" value="修改" @click="btuEdit">
              <input type="button" value="删除" @click="btuDel">
            </th>
          </tr>
          <tr>
            <th>1</th>
            <th>刘兴国</th>
            <th>sbbbbbbbbbb</th>
            <th>
              <input type="button" value="修改" @click="btuEdit">
              <input type="button" value="删除"  @click="btuDel">
            </th>
          </tr>
          <tr>
            <th>1</th>
            <th>刘兴国</th>
            <th>sbbbbbbbbbb</th>
            <th>
              <input type="button" value="修改" @click="btuEdit">
              <input type="button" value="删除"  @click="btuDel">
            </th>
          </tr>  <tr>
            <th>1</th>
            <th>刘兴国</th>
            <th>sbbbbbbbbbbbbbbbbb</th>
            <th>
              <input type="button" value="修改" @click="btuEdit">
              <input type="button" value="删除"  @click="btuDel">
            </th>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</template>
